import _Anchor from "antd/lib/anchor";
import _Button from "antd/lib/button";
import _Icon from "antd/lib/icon";
import _notification from "antd/lib/notification";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  padding-right: 180px;\n  position: relative;\n  box-sizing: border-box;\n  padding-bottom: 32px;\n\n  .t-divider {\n    display: inline-block;\n    width: 65%;\n    height: 1px;\n    background: #ccc;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

/* eslint-disable */
import React, { useContext, useRef, useState, useEffect, useLayoutEffect } from "react";
import styled from "styled-components";
import intl from "cpaas-front/lib/utils/intl";
import { PageContainer } from "../index.style";
import { Content, Header } from "../../components/Page";
import { // PreviewContainer,
SideContainer } from "../ComponentsConfig/index.style";
import PreviewPage from "../Preview";
import ConfigStepOne from "./ConfigStepOne";
import ConfigStepTwo from "./ConfigStepTwo";
import ConfigStepThree from "./ConfigStepThree";
import ConfigStepFour from "./ConfigStepFour";
import { CfgStepsWrapper, ThumbnailContainer, PreviewBtnContainer } from "./index.style";
import OptActions from "../_components/PreviewAction";
import ThemeContext from "../../utils/ThemeContext";
import { pageEvents } from "../../utils/event";
import previewIcon from "../../assets/icons/preview@3x.png";
import { defaultConfig } from "../../utils/config";
import { getSchema } from "../../utils/utils";
import useThemeHelper from "../../components/Container/useThemeHelper";
var StyledContent = styled(Content)(_templateObject()); // 用于缓存进入组件配置时的配置数据

var firstLoadThemeConfig = null;

var ConfigByStep = function ConfigByStep() {
  var anchorMap = {
    step1: [{
      title: intl.get("cpaas.cpaasTheme.components.button").d("按钮"),
      href: "#button-config"
    }, {
      title: intl.get("cpaas.cpaasTheme.components.input").d("输入框"),
      href: "#inputs-config"
    }, {
      title: intl.get("cpaas.cpaasTheme.components.select").d("选择框"),
      href: "#select-config"
    }],
    step2: [{
      title: intl.get("cpaas.cpaasTheme.components.pagination").d("页面导航"),
      href: "#pagination-config"
    }, {
      title: intl.get("cpaas.cpaasTheme.components.slider").d("滑块"),
      href: "#slider-config"
    }, {
      title: intl.get("cpaas.cpaasTheme.components.selectBox").d("选择器"),
      href: "#select-box-config"
    }, {
      title: intl.get("cpaas.cpaasTheme.components.switch").d("开关"),
      href: "#switch-config"
    }, {
      title: intl.get("cpaas.cpaasTheme.components.transfer").d("穿梭框"),
      href: "#transfer-config"
    }],
    step3: [{
      title: intl.get("cpaas.cpaasTheme.components.list").d("列表"),
      href: "#list-config"
    }, {
      title: intl.get("cpaas.cpaasTheme.components.prompt").d("提示"),
      href: "#prompt-config"
    }],
    step4: [{
      title: intl.get("cpaas.cpaasTheme.components.timeline").d("时间轴"),
      href: "#timeline-config"
    }, {
      title: intl.get("cpaas.cpaasTheme.components.tabs").d("切换"),
      href: "#tab-config"
    }, {
      title: intl.get("cpaas.cpaasTheme.components.table").d("表格"),
      href: "#table-config"
    }, {
      title: intl.get("cpaas.cpaasTheme.components.feedback").d("反馈"),
      href: "#pop-confirm-config"
    }, {
      title: intl.get("cpaas.cpaasTheme.components.progress").d("进度条"),
      href: "#progress-config"
    }, {
      title: intl.get("cpaas.cpaasTheme.components.loading").d("加载"),
      href: "#loading-config"
    }]
  };

  var _useState = useState([]),
      _useState2 = _slicedToArray(_useState, 2),
      thumbnails = _useState2[0],
      setThumbnails = _useState2[1];

  var _useState3 = useState(0),
      _useState4 = _slicedToArray(_useState3, 2),
      step = _useState4[0],
      setStep = _useState4[1];

  var _useContext = useContext(ThemeContext),
      _useContext$setTheme = _useContext.setTheme,
      setTheme = _useContext$setTheme === void 0 ? function () {} : _useContext$setTheme,
      _useContext$config = _useContext.config,
      config = _useContext$config === void 0 ? {} : _useContext$config;

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      saving = _useState6[0],
      setSaving = _useState6[1];

  var containerRef = useRef(null);
  var anchorRef = useRef(null);

  var resetScrollContainer = function resetScrollContainer() {
    var container = containerRef.current;

    if (container && container.scrollTo) {
      container.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth"
      });
    }
  };

  useEffect(function () {
    firstLoadThemeConfig = config; // 缓存配置

    pageEvents.on("previewBack", function () {
      // 监听从预览返回的页面事件，将配置重置为进入时的配置
      setTheme(firstLoadThemeConfig);
    });
  }, []);
  useEffect(function () {
    var imgIndex = 1;
    var schema = config.current.schema;
    var resultImages = []; // 所有缩略图

    var lang = intl.getInitOptions().currentLocale || "zh_CN"; // 加载预览图，可能有一张或者多张,所以异步递归调用

    function loadImage(index) {
      var module;
      return _regeneratorRuntime.async(function loadImage$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.prev = 0;
              _context.next = 3;
              return _regeneratorRuntime.awrap(import("../_assets/".concat(schema, "/").concat(lang, "/preview-thumbnails/thumbnail").concat(index, ".png")));

            case 3:
              module = _context.sent;
              resultImages.push(module.default);
              imgIndex += 1;
              loadImage(imgIndex);
              _context.next = 12;
              break;

            case 9:
              _context.prev = 9;
              _context.t0 = _context["catch"](0);
              setThumbnails(resultImages);

            case 12:
            case "end":
              return _context.stop();
          }
        }
      }, null, null, [[0, 9]]);
    }

    loadImage(imgIndex);
  }, [config.schema]);

  var _useState7 = useState(config.current),
      _useState8 = _slicedToArray(_useState7, 2),
      currentTheme = _useState8[0],
      setCurrentTheme = _useState8[1];

  var handleStepItemChange = function handleStepItemChange(values) {
    setCurrentTheme(_objectSpread({}, currentTheme, {}, values));
  };

  var stepMap = [ConfigStepOne, ConfigStepTwo, ConfigStepThree, ConfigStepFour];

  var handleNext = function handleNext() {
    if (step < stepMap.length - 1) {
      setStep(function (s) {
        return s + 1;
      });
      resetScrollContainer();
    }
  };

  var handlePrev = function handlePrev() {
    if (step > 0) {
      setStep(function (s) {
        return s - 1;
      });
      resetScrollContainer();
    }
  };

  var resetToDefault = function resetToDefault() {
    var current = _objectSpread({}, defaultConfig, {
      schema: config.current.schema
    });

    setTheme({
      current: current,
      prev: {}
    });
    setCurrentTheme(current);
    resetScrollContainer();
    setStep(0);
  };

  var handleSubmit = function handleSubmit() {
    setSaving(true);
    setTimeout(function () {
      setSaving(false);
    }, 3000);

    var _useThemeHelper = useThemeHelper(),
        setLocalTheme = _useThemeHelper.setLocalTheme;

    setTimeout(function () {
      setTheme(function (prev) {
        var finalConf = {
          current: currentTheme,
          prev: prev.current
        };
        setLocalTheme(_objectSpread({}, finalConf, {
          prev: {}
        })); // 因为第一次加载必须要全部解析，所以prev为空对象

        return finalConf;
      });
      firstLoadThemeConfig = {
        current: currentTheme,
        prev: config.current
      };

      _notification.success({
        message: intl.get("cpaas.common.notification.success.save").d("保存成功"),
        duration: 3
      });
    }, 200);
  };

  var _useState9 = useState(false),
      _useState10 = _slicedToArray(_useState9, 2),
      preview = _useState10[0],
      setPreview = _useState10[1];

  var handlePreview = function handlePreview() {
    setPreview(true);
    setTimeout(function () {
      // setTheme(currentTheme);
      setTheme(function (prev) {
        return {
          current: currentTheme,
          prev: prev.current
        };
      });
    }, 200);
  };

  useLayoutEffect(function () {
    var container = containerRef.current;
    var anchor = anchorRef.current;
    var top = container.getClientRects()[0].y;
    Object.assign(anchor.style, {
      display: "block",
      top: top + "px"
    });
  }, []);
  var CurrentStep = stepMap[step];
  var currentAnchors = anchorMap["step".concat(step + 1)];
  return React.createElement(React.Fragment, null, React.createElement(PageContainer, null, React.createElement(Header, {
    title: intl.get("cpaas.cpaasTheme.page.componentsConfig").d("组件配置"),
    icon: "setting",
    onBack: function onBack() {
      return pageEvents.emit("push", "theme-config", {});
    }
  }, React.createElement(_Button, {
    style: {
      marginRight: 8
    },
    onClick: resetToDefault
  }, React.createElement(_Icon, {
    type: "sync",
    style: {
      fontSize: 14
    }
  }), intl.get("cpaas.cpaasTheme.page.resetToDefault").d("恢复默认配置")), React.createElement(_Button, {
    type: "primary",
    onClick: handleSubmit,
    loading: saving
  }, React.createElement(_Icon, {
    type: "save",
    style: {
      fontSize: 14
    }
  }), intl.get("cpaas.cpaasTheme.page.save").d("保存"))), React.createElement(StyledContent, {
    id: "component-config-scroll-content-container",
    ref: containerRef
  }, React.createElement(CfgStepsWrapper, null, React.createElement(CurrentStep, {
    config: currentTheme,
    onChange: handleStepItemChange
  }), React.createElement(OptActions, {
    onNext: handleNext,
    onPrev: handlePrev,
    noPrev: step === 0,
    style: {
      position: "absolute",
      bottom: 0
    },
    noNext: stepMap.length - 1 === step
  }))), React.createElement(SideContainer, {
    ref: anchorRef
  }, React.createElement(ThumbnailContainer, null, thumbnails.map(function (v) {
    return React.createElement("div", {
      className: "thumbnail",
      onClick: handlePreview,
      key: v
    }, React.createElement("img", {
      src: v,
      alt: ""
    }));
  })), React.createElement(PreviewBtnContainer, {
    onClick: handlePreview
  }, React.createElement("img", {
    src: previewIcon,
    alt: ""
  }), React.createElement("span", null, intl.get("cpaas.cpaasTheme.page.preview").d("预览效果"))), React.createElement("div", {
    className: "t-divider"
  }), React.createElement(_Anchor, {
    // showInkInFixed
    getContainer: function getContainer() {
      return document.querySelector("#component-config-scroll-content-container");
    }
  }, currentAnchors.map(function (anchor) {
    return React.createElement(_Anchor.Link, {
      key: anchor.title,
      href: anchor.href,
      title: anchor.title
    });
  })))), preview && React.createElement(PreviewPage, {
    onBack: function onBack() {
      return setPreview(false);
    }
  }));
};

export default ConfigByStep;
